<template>
    <div class="upload-wrap">
        <div class="upload-top-box text-center">
            <el-upload
                :disabled="disableUpload"
                :file-list="fileList"
                :action="action"
                :before-upload="beforeUpload"
                :http-request="uploadFile"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                drag
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处上传</div>
            </el-upload>
        </div>
        <div class="upload-util-box">
            <qrcode-vue
                class-name="text-center mt-3"
                :value="copyValue"
                size="200"
            />
            <el-button class="w-100 mt-3" type="primary" @click="copyContent">
                复制链接(简码 {{ data.code }})
            </el-button>
            <el-upload
                class="upload-click mt-3"
                :disabled="disableUpload"
                :file-list="fileList"
                :action="action"
                :before-upload="beforeUpload"
                :http-request="uploadFile"
                :on-success="uploadSuccess"
                :on-error="uploadError"
            >
                <el-button type="primary" :disabled="disableUpload">
                    点击上传
                </el-button>
            </el-upload>
            <el-row class="m-4" :gutter="15">
                <el-col :span="12">
                    <el-input v-model="simpleCode" placeholder="输入四位简码"/>
                </el-col>
                <el-col :span="12">
                    <el-button class="w-100" type="primary" @click="checkCode" @keyup.enter.native="checkCode"
                    >通过简码获取
                    </el-button
                    >
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import qs from 'qs';

import { checkSimpleCodeApi } from '@/api';
import { upload, subscribeUpload } from '@/api/upload';

export default {
    name: 'Upload',
    props: {
        data: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            action: '/upload',
            disableUpload: false,
            fileList: [],
            copyValue: location.href,
            simpleCode: ''
        };
    },
    created() {
        subscribeUpload(
            qs.parse(location.search, {ignoreQueryPrefix: true})['uid']
        );
    },
    methods: {
        beforeUpload() {
            this.disableUpload = true;
            return true;
        },
        uploadFile(context) {
            upload(
                context.action,
                context.file,
                (percent) => {
                    context.file.percent = percent;
                    context.onProgress(context.file);
                },
                qs.parse(location.search, {ignoreQueryPrefix: true})['uid']
            )
                .then(() => {
                    context.onSuccess();
                })
                .catch((e) => {
                    context.onError(e);
                });
        },
        uploadSuccess() {
            this.fileList = [];
            this.disableUpload = true;
        },
        uploadError(e) {
            this.fileList = [];
            this.disableUpload = false;
            this.$message('上传失败' + e);
        },
        copyContent() {
            this.$copyText(this.copyValue).then(
                () => {
                    this.$message('复制成功');
                },
                () => {
                    this.$message('复制失败');
                }
            );
        },
        checkCode() {
            checkSimpleCodeApi(this.simpleCode).then(({data}) => {
                if (data.data) {
                    location.href = '/?uid=' + data.data;
                } else {
                    this.$message('输入的简码已经过期或者错误');
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.upload-wrap {
    .upload-util-box {
        .upload-click::v-deep {
            .el-upload,
            .el-button {
                width: 100%;
            }
        }
    }
}
</style>
